<template>
	<view style="background-color: #fff;display: flex;flex-direction: column;padding-bottom: 20px;">
		<uni-notice-bar show-icon scrollable text="警示:金耀花温馨提示本平台不会有任何境外电话,请不要接听境外电话,谨防电信诈骗!如有疑惑请拨打客服电话:4006890220" />
		<view class="" style="padding: 20rpx 30rpx 30rpx;display: flex;flex-direction: column; ">
			<view style="display: flex; align-items: center;">
				<view class="" style="margin-right: 20rpx;">
					<image src="../../static/prod/image.png" style="width: 110rpx;" mode="widthFix"></image>
				</view>

				<view class="">
					<view class="" style="font-weight: bold;">
						恭喜您，初审成功！
					</view>
					<view class="" style="font-size: 30rpx;margin-top: 10rpx;">
						<text style="color: #FFAD12;font-weight: 600;margin-right: 10rpx;">金耀花</text>
						<text style="color: #666;">根据您的资质，智能匹配以下产品</text>
					</view>
				</view>

			</view>

			<view class="banner-box" v-if="bannerProductsRandom ">
				<image @click="clickProduct(bannerProductsRandom, 6)" src="../../static/prod/branner.png" style="width: 100%;"
					mode="widthFix"></image>
			</view>


			<view class="" >
				<view class="prod-item" v-for="(item,index) in products" @click="clickProduct(item, 3)">
					<view class="prod-bg">
						<view class="prod-title">
							<view class="" style="display: flex; align-items: center;">
								<image style="width: 34rpx;height: 34rpx;border-radius: 5px; margin-right: 10rpx;"
									:src="item.logoUrl" mode="">
								</image>
							</view>
							<text class="text">{{item.productName}}</text>
						</view>
						<view class="prod-tag">
							<text v-for="(itemson,index) in productLabels(item.productLabel)" :key="index">{{ itemson }}</text>
						</view>
						
						<view class="prod-content" style="display: flex;flex-direction: row;justify-content:space-between;align-items: center;">
						
							<view class=""
								style="display: flex;flex-direction: row;;width: 200px;">
								<view class="" style="display: flex;flex-direction: column;">
									<view class="" style="font-size: 10px;color: #8F8F8F;margin-top: 10px;">
										最高可借额度(元)
									</view>
						
									<view class="" style="color: black;font-size: 24px;margin-top: 5px;font-weight: 800;">
										{{unitConverter(item.lnAmount.split('-')[1])}}
									</view>
						
								</view>
								<view class="" style="background-color:#F3F3F3;width: 0px; margin: 0rpx 30rpx;  height: 40px;">
						
								</view>
								<view class="" style="display: flex;flex-direction: column;">
									<view class="" style="font-size: 10px;color: #8F8F8F;margin-top: 10px;">
										货款期限
									</view>
						
									<view class="" style="color: black;font-size: 18px;font-weight: 400;margin-top: 5px;">
										{{item.lnPeriod}}月
									</view>
						
								</view>
							</view>
						
						
						
						
						
							<view
								style="height:30px ;width: 70px;text-align: center;background-color: #FFAD12; color: #fff;border: 1px solid #FFAD12 ; display: flex;flex-direction: column;justify-content: center;border-radius: 16px;font-size: 14px;margin-top: 10px;">
								去申请</view>
						
						</view>
					</view>
					
				</view>
				
			</view>
			<view @click="goToComplaint" class=""
				style="margin-left: 15px;color: #FFAD12;font-size: 14px; cursor: pointer; margin-top: 30px;;display: flex;flex-direction: row;justify-content: center;">
				投诉与建议
			</view>
			
			<view class=""
				style="font-size: 11px;color: #999999;margin-left: 15px;margin-right: 15px;margin-top: 10px;;display: flex;flex-direction: row;justify-content: center;">
				客服电话：4006890220
			</view>
			<view class=""
				style="font-size: 11px;color: #999999;margin-left: 15px;margin-right: 15px;margin-bottom: 20px;display: flex;flex-direction: row;justify-content: center;">
				客服在线时间:周一至周五 9:30-18:30
			</view>
			
			


		</view>
		
		<view v-if="productsfuchuang && productsfuchuang.length >= 1" class="" style="position: fixed;  right: 20rpx; z-index: 999999999; top: 160rpx;">
			<image src="../../static/flot.gif" mode="" style="width: 150rpx;height: 150rpx;"
				@click="clickProduct(productsfuchuang[0], 4)"></image>
		</view>
		
		<view>
				<!-- 普通弹窗 -->
				<uni-popup ref="popup">
					<view class="popup-content" style="width: 300px;height: 320px;">
						<view class=""
							style="width: 300px;display: flex;flex-direction: row;justify-content: flex-end;margin-bottom: 10px;">
							<image src="../../static/windowcolse.png" mode="" style="width: 18px;height: 18px;"
								@click="close()"></image>
						</view>
		
						<view class="" style="	position: relative;background-color: #FFFFFF;border-radius: 8px;">
							<!-- 	<image src="../../static/windowbj.png" mode="" style="width: 300px;height: 300px;position: absolute;left: 0px;
			top: 0px;	"></image> -->
		
							<view class="item-content" style="position: relative;
			left: 0px;
			top: 0px;
			z-index: 2;">
								<view class=""
									style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
									<image src="../../static/windowtitle.png" mode=""
										style="width: 72px;height: 72px;margin-top: 29px;"></image>
									<text
										style="font-size: 15px;color: #333333;font-weight: 500;margin-top: 15px;">金耀花专属额度审批成功</text>
									<text
										style="font-size: 24px;color: #4A5DFF;font-weight: 500;margin-top: 8px;margin-right: 8px;">￥30,000</text>
		
									<text style="font-size: 13px;color: #999999;margin-top: 10px;">额度领取，剩余有效时间</text>
		
		
									<view class="shijian" style="margin-top: 10px;color: red;font-weight: 600;">
										{{countdown}}
									</view>
		
		
		
									<view class="" @click="clickProduct(headProducts, 2)"
										style="color: white;height: 45px;width: 244px;background:#FFAD12; margin-bottom: 27px;margin-top: 14px;border-radius: 23px;display: flex;align-items: center;justify-content: center;">
										<text>立即领取</text>
									</view>
								</view>
							</view>
		
						</view>
					</view>
				</uni-popup>
		
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				products: [],
				headProducts: {},
				h: 23, //时
				m: 59, //分
				s: 59, //秒
				countdown: '24:00:00', //倒计时
				timer: null, //重复执行
				productsfuchuang: [],
				bannerProducts: [],
			}
		},
		computed: {
			bannerProductsRandom() {
				if (!this.bannerProducts || this.bannerProducts.length <= 0) return;
				const index = Math.floor(Math.random() * this.bannerProducts.length)
				return this.bannerProducts[index];
			}
		},
		
		created() {
			if (uni.getStorageSync('authorize') == true) {
				uni.setStorageSync('authorize', false)
				// #ifdef H5
				window.location.href = uni.getStorageSync('authorizeUrl')
				// #endif

				return;

			}
			this.city()

			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight


			this.getProductList(2)
			this.getProductList(3)
			this.getProductList(4)
			this.getProductList(6)
			this.timer = setInterval(() => {
				this.timeCount()
			}, 1000)

			//挂载成功后给pop事件绑定一个方法
			// 如果支持 popstate （一般移动端都支持）
			if (window.history && window.history.pushState) {

				history.pushState(null, null, document.URL);
				window.addEventListener('popstate', () => {
					console.log("监听到了");
					// 往历史记录里面添加一条新的当前页面的url
					// 给 popstate 绑定一个方法用来监听页面返回

					this.$router.push({
						// name: 'index'
						path: '/pages/home/home'
					})

				}, false); //false阻止默认事件
			}
		},
		methods: {
			toLink(link) {
				window.open(link, '_top')
			},
			goToComplaint() {
				uni.redirectTo({
					url: '../complaint/complaint'
				})
			},
			async storeClick(){
				await this.saveClick(511, 7)
				location.href = 'https://saas.q-gp.com/?vccChannel=161272&sonVccChannel=2002543&tenantId=560761&ka=1'
			},
			async city() {
				const res = await this.$myRequest({
					url: 'api/sys/getipinfo',
					method: 'post',
					data: {

					}
				});
				if (res.provinceCode == 110000 || res.provinceCode == 310000) {
					uni.setStorageSync('pageType', 'h5_auth')
					uni.setStorageSync('fasthome', false)

				} else {
					uni.setStorageSync('fasthome', true)
				}
			},
			//24小时倒计时
			timeCount() {
				--this.s;
				if (this.s < 0) {
					--this.m;
					this.s = 59;
				}
				if (this.m < 0) {
					--this.h;
					this.m = 59
				}
				if (this.h < 0) {
					this.s = 0;
					this.m = 0;
				}
				this.countdown = this.h.toString().padStart(2, 0) + ":" + this.m.toString().padStart(2, 0) + ":" + this.s
					.toString().padStart(2, 0)
			},

			open() {
				this.$refs.popup.open('center')
				uni.setStorageSync('homewindow', false)

			},
			close() {
				this.$refs.popup.close()
			},
			async getProductList(e) {
				const res = await this.$myRequest({
					url: 'api/product/list',
					method: 'post',
					data: {
						'sceneId': e
					}
				});
				//头部产品
				if (e == 2) {
					var headProductsList = res.dataList
					var num = Math.floor(Math.random() * headProductsList.length)
					// console.log(num)
					Object.assign(this.headProducts, headProductsList[num])

					var show = uni.getStorageSync('homewindow')
					// show == true && 
					if (headProductsList.length > 0) {
						this.open()
					}

				}
				//列表产品
				else if (e == 3) {
					this.products = res.dataList
					// console.log(this.products)
				}
				//列表产品
				else if (e == 4) {
					this.productsfuchuang = res.dataList
					// console.log(this.products)
				}
				//列表产品
				else if (e == 6) {
					this.bannerProducts = res.dataList
					// console.log(this.products)
				}
				uni.stopPullDownRefresh();

			},
			async clickProduct(item, dataExt) {
				// console.log(item)

				await this.saveClick(item.productId, dataExt)
				if (item.unionFlag == 1) {
					this.getldUrl(item.productId)
				} else {
					// #ifdef H5
					window.location.href = item.detailUrl
					// #endif
				}


			},
			async saveClick(s, dataExt) {
				// console.log(s)
				const res = await this.$myRequest({
					url: 'api/sys/count',
					method: 'post',
					data: {
						'dataId': s,
						'operType': '2',
						'dataExt': dataExt
					}
				});
			},
			async getldUrl(s) {
				const res = await this.$myRequest({
					url: 'api/product/unionInfo',
					method: 'post',
					data: {
						'productId': s,

					}
				});
				// #ifdef H5
				window.location.href = res.productUrl
				// #endif
			},
			productLabels(labels) {
				return labels.split('|')
			},
			unitConverter(num) {
				if (num) {
					num = num.toString().split("."); // 分隔小数点
					var arr = num[0].split("").reverse(); // 转换成字符数组并且倒序排列
					var res = [];
					for (var i = 0, len = arr.length; i < len; i++) {
						if (i % 3 === 0 && i !== 0) {
							res.push(","); // 添加分隔符
						}
						res.push(arr[i]);
					}
					res.reverse(); // 再次倒序成为正确的顺序

					if (num[1]) {
						if (num[1].length < 2) {
							// 如果有小数的话添加小数部分
							res = res.join("").concat("." + num[1] + '0');
						} else if (num[1].length > 2) {
							let data = num[1].substring(0, 2)
							// 如果有小数的话添加小数部分
							res = res.join("").concat("." + data);
						} else {
							res = res.join("").concat("." + num[1]);
						}

					} else {
						res = res.join("").concat();
					}
				} else {
					res = '0.00'
				}
				return res;
			}


		}
	}
</script>

<style>
	.banner-box {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 28rpx;
	}

	.prod-item {
		background: #FFF4E7;
		border-radius: 8px;
		padding: 20rpx;
		margin-top: 30rpx;
	}

	.prod-bg {
		background: url(../../static/prod/mohu.png) no-repeat;
		background-size: 100% 100%;
		position: relative;
		min-height: 210rpx;
	}

	.prod-title {
		display: flex;
		align-items: center;
		position: absolute;
		top: 10rpx;
		left: 10rpx;
		font-size: 26rpx;
		line-height: 20px;
		font-weight: 600;
		max-width: 23%;
		overflow: auto;
	}
	.prod-title .text{
		overflow: auto;
		white-space: nowrap;
	}

	.prod-tag {
		position: absolute;
		top: 16rpx;
		left: 30%;
		border-radius: 4px;
		border: 1px solid #fe6c0b6b;
		padding: 6rpx 20rpx;
		font-size: 26rpx;
		color: #FE6C09;
	}
	.prod-content{
		padding: 80rpx 28rpx 10rpx;
	}
	.prod-bottom-banner{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>